import {Component} from "react"
import Swiper from 'swiper/js/swiper.js' // 引入js
import 'swiper/css/swiper.min.css' // 引入样式
import './styled.scss'
interface Props {}
interface State {}
class Index extends Component<Props, State> {
    componentDidMount() {
         new Swiper('.swiper-container', {
            autoplay: true,
            loop: true,
             pagination:{
                el:".swiper-pagination"
             }
        })
    }

    render() {
        return (
            <>
            <div className='swiper-container' style={{width: '400px', margin: 'auto', textAlign: 'center'}}>
                <div className="swiper-wrapper" style={{color: '#fff'}}>
                    <div className="swiper-slide swiper-slide1">
                        <img src="https://pic.maizuo.com/usr/movie/f22165e0d71bdc81e380b4f9e9b1ad1e.jpg" alt=""/>
                    </div>
                    <div className="swiper-slide swiper-slide1">
                        <img src="https://pic.maizuo.com/usr/movie/90f3c143e34ea9c9d29a759885e3d627.jpg" alt=""/>
                    </div>
                    <div className="swiper-slide swiper-slide1">
                        <img src="https://pic.maizuo.com/usr/movie/f024f2d0569907c186eb7bb2ce45a83b.jpg" alt=""/>
                    </div>
                    <div className="swiper-slide swiper-slide1">
                        <img src="https://pic.maizuo.com/usr/movie/59fd3ddac3c29e17916e1fddaba0041b.jpg" alt=""/>
                    </div>
                    <div className="swiper-slide swiper-slide1">
                        <img src="https://pic.maizuo.com/usr/movie/119576cdfadde4fc917523c95b2b1800.jpg" alt=""/>
                    </div>
                </div>
                <div className='swiper-pagination'></div>
            </div>
            </>
        )
    }
}

export default Index
